import { RocketOutlined, SendOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { Tooltip, Popconfirm } from 'antd'
import { PreviewWord } from '@/desktop/components/words'
import { WordType } from '@/services/common/definition'
import type { Words } from '@/services/resources/words-library'
import { useDrag } from './drag'
import './index.module.less'

// 可二次编辑的话术类型
const editableWordTypes = [WordType.Text, WordType.GroupAt]

export default function WordsItem(props: {
  words: Words
  edit: (words: Words) => void
  remove: (id: number) => void
  send: (words: Words, needConfirm?: boolean) => void
}) {
  const { words, edit, remove, send } = props
  const { props: dragProps } = useDrag()

  // 为 true 代表话术里只有一条内容，且不是可二次编辑的类型，可直接发送
  const shouldDirectSend =
    words.items.length === 1 && !editableWordTypes.includes(words.items[0]!.type)

  return <>
    <div data-words-id={words.id} styleName="words-item" {...dragProps}>
      {words.items.map((word, index) => <PreviewWord key={index} word={word} styleName="word" />)}

      <div styleName="actions">
        {!shouldDirectSend ? (
          <Tooltip title="直接发送话术">
            <RocketOutlined styleName="direct-send" onClick={() => send(words, false)} />
          </Tooltip>
        ) : null}

        <Tooltip title="发送话术">
          <SendOutlined styleName="send" onClick={() => send(words, !shouldDirectSend)} />
        </Tooltip>

        <EditOutlined onClick={() => edit(words)} styleName="edit" />

        <Popconfirm title="确定要删除此话术吗？" onConfirm={() => remove(words.id)}>
          <DeleteOutlined styleName="remove" />
        </Popconfirm>
      </div>
    </div>
  </>
}
